<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-53">
			<view class="flex-row justify-between section_3">
				<view class="flex-col items-start self-center space-y-39">
					<text class="text_4">当前余额</text>
					<text class="text_6">{{points}}</text>
				</view>
				<view class="flex-col justify-center items-center button text-wrapper" @click="toRule">
					<text class="text_5">充值</text>
				</view>
			</view>
			<view class="flex-col group_2 space-y-11">
				<text class="self-start text_7">积分明细</text>
				<view class="flex-row items-center group_4">
					<view class="flex-row items-center shrink-0 relative section_5">
						<view class="section5 flex-row items-center justify-around" @click="content.show=!content.show">
							<text class="image_12" v-if="content.trend == 1">充值</text>
							<text class="image_12" v-else-if="content.trend == 2">下单</text>
							<text class="image_12" v-else-if="content.trend == 3">退款</text>
							<text class="image_12" v-else>描述</text>
							<image class="image_14" src="/static/more3.png" />
						</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(0)"
							:style="content.show?'top:60rpx;':''">全部</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(1)"
							:style="content.show?'top:120rpx;':''">充值</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(2)"
							:style="content.show?'top:180rpx;':''">下单</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(3)"
							:style="content.show?'top:240rpx;':''">退款</view>
					</view>
					<view class="flex-row justify-around items-center flex-auto section_6">
						<image class="image_13" src="/static/calendar.png" />
						<picker mode="date" class="picker" :value="content.start_date" @change="bindDateChange($event,1)">
							<text class="font_3">{{content.start_date!=''?content.start_date:'----------'}}</text>
						</picker>
						<text class="font_3 text_7">-</text>
						<picker mode="date" class="picker" :value="content.end_date" @change="bindDateChange($event,2)">
							<text class="font_3">{{content.end_date!=''?content.end_date:'----------'}}</text>
						</picker>
					</view>
					<view class="flex-col justify-center items-center shrink-0 button_2" @click="toList">
						<text class="font_1 text6">搜索</text>
					</view>
				</view>
				<view class="flex-col">
					<view class="flex-col list-item" v-for="(item, index) in list" :key="index">
						<text class="self-start font_3 text_8">{{item.detail}}</text>
						<view class="flex-col space-y-4">
							<text class="self-end font_4" :style="item.symbol!=1?'color:#111;':''">{{item.symbol==1?'+':'-'}}{{item.value}}</text>
							<view class="self-start group_3">
								<text class="font_5">{{item.create_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	
	let list = ref([])
	let p = ref(1)
	let points = ref('')
	let content = ref({
		wallet: {},
		trend: 0,
		start_date: '',
		end_date: '',
		show: false
	})
	onShow(() => {
		list.value.length=0
		p.value=1
		getDate()
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getDate()
	})
	const getDate=()=> {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.balanceLog,{
			member_id:uni.getStorageSync('member_id')|'',
			trend:content.value.trend,
			start_date:content.value.start_date,
			end_date:content.value.end_date,
			p:p.value,
		}).then(res => {
			if (res.flag == "success") {
				// points.value = res.data.points
				list.value = [...list.value, ...res.data.list]
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo,{
			member_id:uni.getStorageSync('member_id')
		}).then(res => {
			if (res.flag == "success") {
				points.value = res.data.balance
			}
		})
	}
	const toTrend = (num) => {
		content.value.trend = num
		list.value.length = 0
		p.value = 1
		content.value.show = false
		getDate()
	}
	const toList = () => {
		list.value.length = 0
		p.value = 1
		getDate()
	}
	
	const bindDateChange=(e,num)=>{
		console.log(e,num);
		if(num==1){
			content.value.start_date=e.detail.value
		}else{
			content.value.end_date=e.detail.value
		}
	}
	const toDetail=(active_id,type)=>{
		uni.navigateTo({
			url: '/pages/buyingDetail/buyingDetail?type='+type+'&active_id=' + active_id
		})
	}
	const toRule=()=>{
		uni.navigateTo({
			url: '/pages/Recharge/Recharge'
		})
	}
</script>
<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
	/* 	overflow-y: auto;
		overflow-x: hidden; */
		height: 100vh;
	}

	.group {
		padding-bottom: 13rpx;
	}

	.space-y-53>view:not(:first-child),
	.space-y-53>text:not(:first-child),
	.space-y-53>image:not(:first-child) {
		margin-top: 53rpx;
	}

	.section_3 {
		padding: 62rpx 0 97rpx 49rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61762c25e4f145001133605e/65083f3cec88660011283436/16950468389445379049.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.space-y-39>view:not(:first-child),
	.space-y-39>text:not(:first-child),
	.space-y-39>image:not(:first-child) {
		margin-top: 39rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 72rpx;
		font-family: DINMittelschriftStd;
		line-height: 53rpx;
	}

	.button {
		/* align-self: flex-start; */
		margin-top: 18rpx;
		margin-right: 40rpx;
	}

	.text-wrapper {
		background-color: #ffffff;
		border-radius: 34rpx;
		width: 140rpx;
		height: 68rpx;
	}

	.text_5 {
		color: #ff3333;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
	}

	.group_2 {
		padding: 0 28rpx;
	}

	.space-y-11>view:not(:first-child),
	.space-y-11>text:not(:first-child),
	.space-y-11>image:not(:first-child) {
		margin-top: 11rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 32rpx;
		font-family: PingFangSC;
		line-height: 31rpx;
	}
	.group_4 {
		margin-top: 38rpx;
	
		.section_5 {
			width: 210rpx;
			background-color: #f0f1f2;
			border-radius: 12rpx;
			height: 69rpx;
	
			.section5 {
				width: 100%;
				height: 100%;
				z-index: 99;
				background-color: #f0f1f2;
				border-radius: 12rpx;
			}
	
			.image_12 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #939293;
			}
	
			.image_14 {
				border-radius: 2rpx;
				width: 12rpx;
				height: 8rpx;
			}
		}
	
		.popupaItem {
			width: 210rpx;
			height: 68rpx;
			padding-left: 35rpx;
			background-color: #f5f5f5;
			position: absolute;
			z-index: 9;
			top: 0;
			transition: all .5s;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333;
			text-align: left;
		}
	
		.space-x-111 {
	
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 111rpx;
			}
		}
	
		.section_6 {
			margin-left: 25rpx;
			padding:0 12rpx;
			background-color: #f0f1f2;
			border-radius: 12rpx;
			height: 69rpx;
			.picker{
				margin-top: -8rpx;
			}
			.image_13 {
				width: 24rpx;
				height: 24rpx;
			}
	
			.font_3 {
				font-size: 20rpx;
				font-family: PingFang SC;
				line-height: 16rpx;
				color: #111;	
			}
	
			.text_7 {
				color: #333333;
				line-height: 2rpx;
			}
		}
	
		.button_2 {
			margin-left: 18rpx;
			margin-right: 3rpx;
			// padding: 22rpx 0;
			background-color: #54BC6E;
			border-radius: 12rpx;
			width: 88rpx;
			height: 68rpx;
	
			.text6 {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.list-item {
		padding: 38rpx 0 32rpx;
		border-bottom: solid 2rpx #f7f7f7;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 28rpx;
		color: #333333;
	}

	.text_8 {
		line-height: 27rpx;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 4rpx;
	}

	.font_4 {
		font-size: 36rpx;
		font-family: PingFangSC;
		line-height: 28rpx;
		color: #ff3333;
	}

	.group_3 {
		line-height: 18rpx;
	}

	.font_5 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 18rpx;
		color: #999999;
	}
</style>